<template>
    <el-row>
        <el-col :span="12">
            <el-card style="width: 800px;">
                <!--<el-form-item>-->
                <!--    <el-button type="primary" @click="exportExcel">下载</el-button>-->
                <!--</el-form-item>-->
                <el-button type="success" style="margin-bottom:10px ;" @click="addDialogShow = true">添加</el-button>
                <el-table :data="departmentList" style="width: 100%" id="out-table">
                    <el-table-column prop="did" label="ID" width="50px" />
                    <el-table-column prop="dname" label="部门名称" />
                    <el-table-column prop="dcontact" label="部门电话" width="200px" />
                    <el-table-column label="部门人员" width="250px">
                        <template #default="scope">
                            <div @mouseenter="showTooltip = true" @mouseleave="showTooltip = false">
                                <span v-if="scope.row.repairPersonnels && scope.row.repairPersonnels.length > 0">
                                    <!-- 如果有多个员工，使用 v-for 遍历显示 -->
                                    <span v-for="person in scope.row.repairPersonnels" :key="person.pid">
                                        {{ person.pname }}
                                        <span
                                            v-if="scope.row.repairPersonnels.indexOf(person) < scope.row.repairPersonnels.length - 1">,</span>
                                    </span>
                                </span>
                                <span v-else>暂无人员</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="160px">
                        <template #default="scope">
                            <el-button size="small" type="primary" @click="selectBydid(scope.row.did)">修改</el-button>
                            <el-popconfirm title="你确定要删除该部门么?" confirm-button-text="确认" cancel-button-text="取消"
                                @confirm="deleteByDid(scope.row.did)">
                                <template #reference>
                                    <el-button size="small" type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
    </el-row>
    <!--添加部门对话框开始 -->
    <el-dialog v-model="addDialogShow" title="添加部门" width="500">
        <el-form>
            <el-form-item label="部门名称" label-width="20%">
                <el-input v-model="departmentAdd.dname" autocomplete="off" />
            </el-form-item>
            <el-form-item label="部门电话" label-width="20%">
                <el-input v-model="departmentAdd.dcontact" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialogShow = false">取消</el-button>
                <el-button type="primary" @click="insert">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <!--添加部门对话框结束 -->
    <!--修改部门对话框开始-->
    <el-dialog v-model="updateDialogShow" title="修改部门" width="500">
        <el-form>
            <el-form-item label="部门名称" label-width="20%">
                <el-input v-model="departmentUpdate.dname" autocomplete="off" />
            </el-form-item>
            <el-form-item label="部门电话" label-width="20%">
                <el-input v-model="departmentUpdate.dcontact" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateDialogShow = false">取消</el-button>
                <el-button type="primary" @click="update">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <!--修改部门对话框结束-->


</template>

<script setup>
import departmentApi from '@/api/departmentApi';
import repairPersonnelApi from '@/api/repairPersonnelApi';
import { reactive, ref, shallowReactive } from 'vue';
import { ElMessage } from 'element-plus';
import { ElLoading } from 'element-plus'
import FileSaver from "file-saver";
import * as XLSX from 'xlsx';

const departmentList = ref([]);

const addDialogShow = ref(false);

const departmentAdd = ref({
    dname: '',
    dcontact: ''
});
const updateDialogShow = ref(false);

const departmentUpdate = ref({
    did: 0,
    dname: '',
    dcontact: ''
});
function exportExcel() {
  const filteredData = departmentList.value.map(item => ({
    '部门id': item.did,
    '部门名称': item.dname,
    '部门电话': item.dcontact,
    '部门人员': item.repairPersonnels ? item.repairPersonnels.map(person => person.pname).join(', ') : '暂无人员'
  }));

  const ws = XLSX.utils.json_to_sheet(filteredData);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

  const wbout = XLSX.write(wb, {
    bookType: "xlsx",
    bookSST: true,
    type: "array"
  });

  try {
    saveAs(new Blob([wbout], { type: "application/octet-stream" }), "用户.xlsx");
  } catch (e) {
    if (typeof console !== "undefined") console.log(e, wbout);
  }
}

function update() {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中~~~',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    departmentApi.update(departmentUpdate.value)
        .then(resp => {
            loading.close()
            if (resp.code == 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                updateDialogShow.value = false;

                selectAll();
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        });
}
function selectBydid(did) {
    departmentApi.selectById(did)
        .then(resp => {
            departmentUpdate.value = resp.data;
            updateDialogShow.value = true;
        });
}

function insert() {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中~~~',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    departmentApi.insert(departmentAdd.value)
        .then(resp => {
            loading.close()
            if (resp.code == 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                addDialogShow.value = false;

                departmentAdd.value = {
                    dname: '',
                    dcontact: ''
                }
                selectAll();
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        });
}

function selectAll() {
    departmentApi.selectAll()
        .then(resp => {
            departmentList.value = resp.data;
        });
}
function deleteByDid(did) {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中~~~',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    departmentApi.delete(did)
        .then(resp => {
            loading.close()
            if (resp.code == 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                selectAll();
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        });
}
selectAll();
</script>

<style scoped>
</style>